<script setup lang="ts">

import ToolBarCenter from "~/components/toolbar/ToolBarCenter.vue";
import HeroFullText from "~/components/hero/HeroFullText.vue";
import ImageWaterFallDrawOutput from "~/components/ai/ImageWaterFallDrawOutput.vue";
import HoverCard from "~/components/common/HoverCard.vue";
import type {WorkFlow} from "~/utils/comfyuiApi";
import Workflows from "~/pages/admin/workflows.vue";
import type {User} from "~/composables/authhooks";
import FooterDownload from "~/components/common/FooterDownload.vue";
import type {APPSetting} from "~/stores/appStore";
import HomeCarousels from "~/components/common/HomeCarousels.vue";

definePageMeta({
  //布局
  layout: 'ui-layout',
  validate: async (route: any) => {
    return true
  }
})


const tab = ref("apps")


const apps=ref<any[]>([])

onMounted(async () => {
  await Promise.all([getApps()])
  // await getApps()
  // await getAppPageContent()
})

// interface WorkFlowApp{
//   user:User
//   workflow:WorkFlow
// }
interface UserWorkFlow{
  user_id:User
  workflows:WorkFlow[]
}

const getApps=async () => {
  const _res = await Client_GET('/workflow/getAllWorkflowApps') as UserWorkFlow
  if (_res){
    console.log(_res.workflows)
    const _temp=[] as WorkFlow[]
    for (const workflow of _res.workflows) {
      //是否为公开
      if(workflow.is_public===true){
        const user=_res.user_id
        Object.assign(workflow,{user})
        _temp.push(workflow)
      }
    }
    //将获取的数据按照sort的值进行从小到大排序
    _temp.sort((a,b)=>{
      return a.sortNumber-b.sortNumber
    })
    apps.value=_temp
    console.log(apps.value)
  }
}

//控制显示
const { mdAndUp} = useDisplay()
</script>

<template>
  <v-sheet class="mx-4">
<!--<tool-bar-center/>-->
<!--  首页-->
  <hero-full-text/>
<!--  应用和切换-->
  <v-card color="transparent">
    <v-card-title>
    <v-tabs
        v-model="tab"
        align-tabs="center"
        color="deep-primary-accent-4"
    >
      <v-tab prepend-icon="mdi-apps" value="apps">应用</v-tab>
      <v-tab prepend-icon="mdi-image" value="images">作品</v-tab>
    </v-tabs>
    </v-card-title>
    <v-window v-model="tab">
      <v-window-item value="images">
        <image-water-fall-draw-output/>
      </v-window-item>
      <v-window-item value="apps">
        <v-row class="mx-auto">
          <v-col cols="6" sm="6" md="4" lg="3" xl="2" :class="mdAndUp?'':'pa-2'" v-for="(item,index) in apps" :key="index">
            <hover-card :data="item" src-label="cover" avatar-label="avatar_url"></hover-card>
          </v-col>
        </v-row>
      </v-window-item>
    </v-window>
  </v-card>
  </v-sheet>
  <v-sheet min-height="1000"></v-sheet>
  <footer-download/>
</template>

<style scoped lang="scss">

</style>